<template>
  <section class="vpt-base-tpl-1006">
    <div class="icon"><img src="@/assets/img/theme2/icon.png" /></div>
    <div class="vpt-base-content"
         :style="contentStyle">
      <div class="vpt-base-content-left"
           :style="leftStyle">
        <div :class="
            screenSize == 'horvsreen'
              ? 'vpt-label-item-horvsreen'
              : 'vpt-label-item'
          "
             v-for="(item, i) in listLeft"
             :key="i">
          <div class="vpt-label">{{ item.label }}</div>
          <div class="vpt-val">
            {{ addThousandsSeparator(item.value) }}
            <span class="vpt-unit">{{ item.unit }}</span>
          </div>
        </div>
      </div>
      <div class="vpt-base-content-right"
           :style="rightStyle">
        <div class="vpt-label-item"
             :style="itemRightStyle"
             v-for="(item, i) in listRight"
             :key="i">
          <!--  :style="{ width: i !== 2 ? 'auto' : '100%' }" -->
          <label class="vpt-label"> {{ item.label }} </label>
          <div class="vpt-val">
            {{ addThousandsSeparator(item.value) }}
            <em class="vpt-unit">{{ item.unit }}</em>
          </div>
        </div>
      </div>
      <div class="vpt-base-btn"
           :style="btnStyle">安全可靠I级</div>
    </div>
  </section>
</template>

<script setup>
import { addThousandsSeparator } from "@/utils/formatter.js";
const props = defineProps({
  screenSize: {
    type: String,
    default: () => {
      return "largescreen";
    }
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  listLeft: {
    type: Array,
    default: () => {
      return [];
    },
  },
  listRight: {
    type: Array,
    default: () => {
      return [];
    },
  },
  contentStyle: {
    type: Object,
    default: () => {
      return {
        paddingTop: "0.2rem",
      };
    },
  },
  leftStyle: {
    type: Object,
    default: () => {
      return {
        width: "0.7rem",
        padding: "0.16rem 0.12rem",
        marginRight: "0.2rem",
      };
    },
  },
  rightStyle: {
    type: Object,
    default: () => {
      return {
        width: "1.8rem",
        padding: "0.08rem",
      };
    },
  },
  itemRightStyle: {
    type: Object,
    default: () => {
      return {
        width: "auto",
      };
    },
  },
  btnStyle: {
    type: Object,
    default: () => {
      return {
        right: "0.02rem",
      };
    },
  },
});
</script>
<style lang="less" scoped>
.vpt-base-tpl-1006 {
  // padding-left: 0.2rem;
  // padding-top: 0.2rem;
  // font-size: 0.3rem;
  // width: 100%;
  position: relative;
  .icon {
    position: absolute;
    top: -0.2rem;
    right: 0.05rem;
  }
  .vpt-base-title {
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0;
  }

  .vpt-base-content {
    display: flex;
    width: 100%;
    padding-top: 0.14rem;
    box-sizing: border-box;
    .vpt-base-content-left {
      width: 0.92rem;
      padding: 0.12rem 0.12rem;
      background: #1470cc1a;
      border: 0.01rem solid #e6ebf5;
      .vpt-label-item:first-child {
        margin-bottom: 0.2rem;
      }
      .vpt-label-item-horvsreen:first-child {
        margin-bottom: 0.1rem;
      }
    }
    .vpt-base-content-right {
      flex: 1;
      width: 0;
      padding: 0.12rem;
      padding-right: 0;
      // display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      .vpt-label-item {
        &:not(:last-child) {
          margin-right: 0.2rem;
          margin-bottom: 0.1rem;
        }
      }
    }
    .vpt-label-item,
    .vpt-label-item-horvsreen {
      width: 100%;
      // margin-right: 0.2rem;
      // display: flex;
      .vpt-label {
        color: #ffffffb3;
        font-size: 0.14rem;
        line-height: 0.2rem;
        letter-spacing: 0;
      }
      .vpt-val {
        font-size: 0.18rem;
        color: #fff;
        margin-top: 0.08rem;
        line-height: 0.22rem;
        letter-spacing: 0;
        .vpt-uit {
          color: #ffffffb3;
          font-style: normal;
          font-size: 0.18rem;
        }
      }
    }
  }
  .vpt-base-btn {
    background: #165dff;
    font-size: 0.14rem;
    color: #fff;
    height: 0.22rem;
    line-height: 0.22rem;
    position: absolute;
    bottom: 0.18rem;
    right: -0.02rem;
    padding: 0 0.05rem;
  }
}
</style>